<template>
    <!-- 滚动通知 -->
    <nut-noticebar
        :text="msg"
        background="#FEFBEC"
        color="#333"
        :scrollable="true"
    >
        <template v-slot:left-icon>
            <cdn-img src="/static/img/inform.png" class="inform" />
        </template>
    </nut-noticebar>
    <!-- 轮播图 -->
    <nut-swiper :init-page="swiper.page" :pagination-visible="true" pagination-color="#426543" auto-play="3000" class="swiperContainer">
        <nut-swiper-item class="item" v-for="item in config.oemInfo.banner" :key="item.id">
            <cdn-img :src="item.full_path" class="swiperItem" mode="aspectFill"/>
        </nut-swiper-item>
    </nut-swiper>
</template>
    
<script setup>
import { ref, reactive, onBeforeMount } from 'vue'
import { useConfigStore } from "@/stores";
import { getScrollMsg } from "@/api/index";

const config = useConfigStore()
const msg = ref('')
const swiper = reactive({page: 2});

onBeforeMount(()=>{
    getScrollMsg().then(res=>{
        if(res&&res.data){
            const { dy_nickname, fans_num, time } = res.data
            msg.value = `恭喜达人 ${dy_nickname} ${fans_num}粉 ${time} 入驻平台`
        }
    })
})
</script>

<style lang="scss">
.inform{
    width: 14px;
    height: 14px;
}
.swiperContainer{
    margin: 10px auto 0;
    height: 150px;
    .nut-swiper-inner{
        width: 100%;
    }
    .item{
        width: 100%;
        height: 150px!important;
    }
    .nut-swiper-item{
        line-height: 150px;
    }
    .swiperItem{
        display: block;
        width: 355px;
        height: 150px;
        margin: 0 auto;
        background: #ccc;
        border-radius: 10px;
    }
}
</style>